<script setup>
import router from "../../../../router/index.js";
import {RULE} from "../../../../const/index.js";
import {onMounted, reactive, ref} from "vue";
import MyNav from "../../../../components/MyNav.vue";
import MyForm from "../../../../components/MyForm.vue";
import {simpleListApi, updateApi} from "../../../../api/axios.js";
import {getResponseData} from "../../../../util/request.js";
import {isNotNull} from "../../../../util/index.js";

// 获取当前订单详情记录
let orderDetail = JSON.parse(sessionStorage.getItem('row'));
// 所属订单活动ID和订单活动标题
let orderId = sessionStorage.getItem('orderId');
let orderTitle = sessionStorage.getItem('orderTitle');
let id = sessionStorage.getItem('id');

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'Goods', label: '营销管理'},
  {icon: 'Stopwatch', label: '订单列表', url: '/Order'},
  {icon: 'Stopwatch', label: `《${id}》活动详情`, url: '/OrderDetail'},
  {icon: 'Edit', label: '修改订单详情'},
];

/* ==================== 全查课程 ==================== */

let courseOptions = ref([]);

/** 全查课程 */
async function listCourse() {
  courseOptions.value = [];
  let res = await simpleListApi(null, {module: 'course'});
  let data = getResponseData(res);
  if (isNotNull(data)) {
    data.forEach((item) => {
      let course = {};
      course['label'] = item['title'] + '（￥' + item['price'] + '）';
      course['value'] = item['id'];
      courseOptions.value.push(course);
    });
  }
}



/* ==================== 全查订单 ==================== */

let orderOptions = ref();

/** 全查订单 */
async function listOrder() {
  orderOptions.value = [];
  let res = await simpleListApi(null, {module: 'order'});
  let data = getResponseData(res);
  if (isNotNull(data)) {
    data.forEach((item) => {
      let order = {};
      order['label'] = item['id'] ;
      order['value'] = item['id'];
      orderOptions.value.push(order);
    });
  }
}




/* ==================== 修改表单 ==================== */

// 表单项 + 表单值 + 表单规则
let items = ref([

  {
    label: '订单', prop: 'fkOrderId', required: true, span: 12,
    type: 'select', options: orderOptions, placeholder: '请选订单'
  },
  {
    label: '活动课程', prop: 'fkCourseId', required: true, span: 12,
    type: 'select', options: courseOptions, placeholder: '请选择课程'
  },


]);
let data = reactive(orderDetail);
let rules = {info: RULE.COMMON_INFO};

/**
 * 修改成功后调用
 * 1. 路由到 OrderDetail 页面
 */
function updateSuccess() {
  router.push('/OrderDetail');
}

/* ==================== 加载函数 ==================== */

onMounted(() => listCourse());
onMounted( ()=> listOrder());

</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <el-card class="sub-order-detail-update-card" header="修改订单详情信息">
    <my-form type="update"
             :items="items"
             :rules="rules"
             :api="updateApi"
             :params="data"
             :args="{module: 'orderDetail'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
.sub-order-detail-update-card {
  width: 90%; // 宽度
  margin: 20px auto 0; // 外边距
}
</style>